<template>
  <div class="preview-container">
    <embed type="text/html" :src="fileUrl" style="width: 100%" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { getFileById } from '@/api/index.js';
// 下载pdf包放在本地：https://mozilla.github.io/pdf.js/getting_started/#download
export default defineComponent({
  components: {},
  props: {
    fileId: {
      type: Number,
      default: 0,
    },
    fileType: {
      type: String,
      // doc,docx,pdf,xlsx,
      default: 'docx',
    },
  },
  setup(props) {
    const fileUrl = ref('');
    const getFileUrl = async () => {
      await getFileById({ id: props.fileId }).then((item) => {
        // fileUrl.value = '/pdf/web/viewer.html?file=' + item.Data; // 这是一个存在服务器上的文件路径，如http://127.0.0.1/uploads/attachment/文件名
        window.open(item.Data); // 直接在支持pdf预览浏览器浏览
      });
    };
    getFileUrl();
    return {
      fileUrl,
    };
  },
});
</script>

<style lang="less" scoped>
.preview-container {
  max-height: 500px;
  overflow-y: scroll;
}
</style>
